<template>
	<view class="content">
		<view class='header'>
			<u-row>
				<u-col span="3">
					<text class="iconfont icon-anke"></text>

				</u-col>
				<u-col span="1">

				</u-col>
				<u-col span="7">
					<u-tabs lineWidth='40' lineColor='#00aa7f' :list="list1" @click="click"></u-tabs>
				</u-col>
				<u-col span="1">
					<!-- <text class="iconfont icon-huojian"></text> -->
					<u-action-sheet round='10' :actions="addBtnList" :closeOnClickOverlay="true"
						:closeOnClickAction="true" :title="addBtnTitle" :show="addBtnShow"
						@close="addBtnShow=false" @select='selectAddBtn'></u-action-sheet>
					<u-icon name="plus-circle" color="#00aa7f" @click="addBtnShow=true" size="28"></u-icon>
				</u-col>

			</u-row>
		</view>
		<view class="search-bar">
			<u--input color="#00aa7f" :placeholder="hotSearchInfo" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" shape='circle' border="surround"></u--input>
		</view>
		<view class="content">
			<view class="post">
				<view class="post-header">
					<text class="username">阴间玩论坛</text>
					<text class="date">03-13</text>
				</view>
				<view class="post-content">
					<text>我在这里大胆预言，明年杜兰特回归雷霆</text>
					<image src="/path/to/image.jpg" class="post-image" />
				</view>
				<view class="post-reply">
					<text>太原到底有没有森林:</text>
					<text>就是雷霆十八个人全部赛季报销杜兰特求着来雷霆也不要他</text>
				</view>
			</view>
			<view class="comment">
				<text class="comment-header">湿乎乎的话题</text>
				<text class="comment-content">太阳目前的窘境和杜兰特的到来没有直接的关系</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function() {},
		data() {
			return {
				list1: [{
					name: '热榜',
				}, {
					name: '推荐',
				}, {
					name: '评分',
				}],
				hotSearchInfo: '大家都在搜',
				addBtnTitle: '为社区贡献内容',
				addBtnList: [{
						name: '评分',
						subname: "创建评分/发起测评",
						color: '#00aa7f',
						fontSize: '20',
						id:1
					},
					{
						name: '帖子',
						subname: "发布/帖子/视频/投票",
						color: '#00aa00',
						fontSize: '20',
						id:2
					}
				],
				addBtnShow: false
			}
		},
		methods: {
			selectAddBtn(index){
				console.log(index)
				if(index.id==2){
					//在起始页面跳转到test.vue页面并传递参数
					uni.navigateTo({
						url: 'release/publishingContent/index'
					});
				}
			}
		}
	}
</script>

<style>
	.container {
		padding: 10px;
	}

	.time {
		font-size: 14px;
	}

	.status {
		display: flex;
		gap: 5px;
	}

	.search-bar {
		margin-top: 48px;
	}


	.content {
		background-color: #fff;
		padding: 10px;
		border-radius: 5px;
	}

	.content .header {
		// margin-top: var(--status-bar-height);
		height: 78rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.post {}

	.post-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.username {
		font-weight: bold;
	}

	.date {
		color: #888;
	}

	.post-content {
		margin-bottom: 5px;
	}

	.post-image {
		width: 100%;
		height: auto;
		margin-bottom: 5px;
	}

	.post-reply {
		margin-top: 5px;
	}

	.comment {
		margin-top: 10px;
	}

	.comment-header {
		font-weight: bold;
	}

	.demo-layout {
		height: 70rpx;
		border-radius: 4rpx;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.icon-huojian {
		font-size: 50rpx
	}

	.icon-anke {
		font-size: 50rpx;
		color: #00aa7f;
		padding-left: 20rpx;

	}
</style>